<template>
  <div>
    <el-table
      height="545px"
      :data="records"
      align="center"
      stripe>
      <el-table-column
        prop="user__name"
        label="姓名"
        width="150">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型"
        width="150">
      </el-table-column>
      <el-table-column
        prop="money"
        label="价钱"
        width="150">
      </el-table-column>
      <el-table-column
        prop="payed"
        style="selection"
        label="还否"
        width="150">
        <template slot-scope="scope">
          <input type="checkbox" :checked="scope.row.payed"
                 @click="handleClick(scope.row)"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        width="150">
      </el-table-column>
      <el-table-column
        padding="2px 0 2px 0"
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData4)"
            type="text">
            保存
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      @current-change="searchPage"
      :page-count="pageSize">
    </el-pagination>
  </div>
</template>


<script>
  export default {
    name: "Main",
    props: ['data'],
    data: () => ({
      records: [],
      pageSize: 1,
    }),
    methods: {
      handleClick(row) {
        row.payed = !row.payed
        console.log(this.records)
        console.log(row)
      },
      searchPage(page) {
        let that = this
        this.$http.get('list', {
          params: {name: that.data, page: page}
        }).then((result) => {
          // console.log(result.data)
          this.records = result.data;
          this.pageSize = result.count;
        })
      },
      // objectSpanMethod({row, column, rowIndex, columnIndex}) {
      //   var name = this.data
      //   if (row.user__name == name)
      //     if (columnIndex === 0) {
      //       if (rowIndex === 0)
      //         return [10, 1]
      //       else {
      //         return [0, 0]
      //       }
      //     }
      //     else {
      //       return [-1, -1];
      //     }
      // }
    }

    ,
    watch: {
      data(data) {
        // let that = this
        this.$http.get('list', {
          params: {
            name: data
          }
        }).then((result) => {
          // console.log(result.data)
          this.records = result.data;
          this.pageSize = result.count;
        })
        // .then(function (result) {
        //   that.records = result.data
        // })
      }
    }
  }
</script>

<style scoped>
  .el-button {
    padding: 0;
  }

  .el-pagination {
    text-align: center;
    white-space: nowrap;
    color: #303133;
    padding: 7px 0;
    font-weight: 700;
  }
</style>
